<template>
  <div class="help-container">
    <h1 class="title">欢迎使用闭合分析工具</h1>
    <p>
      闭合分析工具是一个强大的系统性能分析工具，旨在帮助工程师深入了解闭环系统的性能特征和优化潜力。以下是工具的主要特点：
    </p>

    <div class="feature">
      <h2>全面性能分析</h2>
      <p class="feature-description">
        • 提供系统响应、稳定性、鲁棒性等方面的全面性能评估，帮助您全面了解系统运行状况。
      </p>
    </div>

    <div class="feature">
      <h2>多模型支持</h2>
      <p class="feature-description">
        • 支持数学模型、仿真模型、本体建模以及杀伤链建模，助力更深入地理解系统的动态行为。
      </p>
    </div>

    <!-- 其他特点 -->

    <div class="feature">
      <h2>用户友好界面</h2>
      <p class="feature-description">
        • 提供直观的图形界面，使工程师能够轻松分析闭合系统的性能，同时支持图表和其他形式的可视化。
      </p>
    </div>

    <p>
      通过闭合分析工具，您可以在虚拟环境中测试闭合系统，优化系统控制参数，并在实际应用前进行全面验证。
    </p>
    <p>
      工具还支持与其他工程工具、仿真软件或实时系统的集成，以更好地支持系统开发和改进。
    </p>
    <div class="airplane-background">
      <img src="../../assets/yaosu.jpg" alt="Airplane" class="airplane-icon" />
    </div>
  </div>

</template>



<style scoped>
.help-container {
  max-width: 600px;
  margin-left: 20px;
  padding: 20px;
  color: #333; /* 设置主要文本颜色 */
  text-align: left; /* 将文本左对齐 */
  position: relative; /* 使 .airplane-background 相对于 .help-container 定位 */
}

.title {
  color: #1E90FF; /* 设置标题颜色，这里是深蓝色 */
  margin-bottom: 10px; /* 添加标题底部间距 */
  text-align: left; /* 将标题左对齐 */
}

.feature h2 {
  color: #1E90FF; /* 设置特点标题颜色，这里是绿色 */
}

.airplane-background {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0%; /* 背景图容器宽度 */
  height: 0%; /* 背景图容器高度 */
  background-image: url('../../assets/help.jpg');
  background-size: cover; /* 使背景图铺满整个容器 */
  z-index: 0; /* 保证背景在内容上方 */
}

.airplane-icon {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 50%;
  z-index: -1; /* 将 z-index 设置为负值，确保在其他元素下方 */
}
</style>

